<script lang="ts" setup>
import PageTable from "@/components/PageTable/index.vue";
import SearchHeader from "@/components/SearchHeader/index.vue";
import PageContainer from "@/components/PageContainer/index.vue";
import {reactive, ref} from "vue";
import {
  Mouse,
  DeleteFilled,
  CirclePlus,
  View,
  DocumentAdd,
  Remove,
  Shop,
  Filter
} from '@element-plus/icons-vue'
import {addTakeRentInvoice, editOperatorRentOrder, operatorRentOrderList} from "@/api/demoApi";
import {message} from "@/utils/message";
import RentOrderDetail from "@/views/operator/components/RentOrderDetail.vue";
import {ButtonColor} from "@/utils/buttonsColor";
import {ElMessageBox} from "element-plus";
import RentOrderConfirm from "@/views/operator/components/RentOrderConfirm.vue";
import TableEmpty from "@/assets/emptys/orderEmpty.png";
import {TakeRentInvoiceObj} from "@/api/demoClass";

defineOptions({
  name: "ownerContract"
});

/**-------------------搜索-------------------**/
//查询参数
const queryList = ref([
  {key:'projectNo',label:'站点',type:'input'},
  {key:'projectName',label:'运营商',type:'input'},
  {key:'projectName',label:'订单状态',type:'select',options:[
      {label:'待确认',value: 0},
      {label:'待申请开票',value: 1},
      {label:'待开票',value: 2},
      {label:'已开票',value: 3},
      {label:'已回款',value: 4},
      {label:'待冲红',value: 5},
      {label:'已冲红',value: 6},
      {label:'已作废',value: 7},
    ]},
])
//分页
const pageQuery = reactive({
  page:1,
  size:15
})
//查询回调
const searchHandler = (queryForm)=>{
  console.log(queryForm)
}
//分页回调
const paginationHandler = (pageInfo) =>{
  pageQuery.page = pageInfo.page
  pageQuery.size = pageInfo.size
}

/**-------------------列表-------------------**/
const activeModel = ref(0)
//总条数
const total = ref(0)
//表格列
const tableColumns = [
  {label:'订单期数',key:'orderNo'},
  {label:'所属站点',key:'stationName'},
  {label:'运营商',key:'operator'},
  {label:'开始日期',key:'orderStart'},
  {label:'结束日期',key:'orderEnd'},
  {label:'订单金额',key:'orderPrice'},
  {label:'实收金额',key:'realPrice'},
  {label:'开票单位',key:'rentSigningUnit',custom:true},
  {label:'发票类型',key:'rentInvoiceType',custom:true},
  {label:'税率',key:'rentTax'},
  {label:'开票内容',key:'rentInvoiceContent',custom:true},
  {label:'订单备注',key:'remark'},
  {label:'订单状态',key:'status',custom:true},
  {label:'操作',key:'operation',custom:true,width: 300}
]
//表格行数据
const tableData = ref([])
const getTableData = ()=>{
  tableData.value = operatorRentOrderList()
}
getTableData()

/**-------------------操作-------------------**/
//切换模式
const changeModel = type =>{
  if(activeModel.value === 0) {
    queryList.value.splice(-1,1)
    message(type === 1 ? '进入开票，已筛选所有待开票订单' : '进入冲红，已筛选所有已开票订单',{type:'info'})
    activeModel.value = type
    tableData.value = operatorRentOrderList().filter(item=>type === 1 ? item.status === 1 : item.status === 3)
  }else {
    message(type === 1 ? '退出开票，已恢复条件筛选' : '退出冲红，已恢复条件筛选',{type:'info'})
    activeModel.value = 0
    getTableData()
    queryList.value.push({key:'projectName',label:'订单状态',type:'select',options:[
        {label:'待确认',value: 0},
        {label:'待申请开票',value: 1},
        {label:'待开票',value: 2},
        {label:'已开票',value: 3},
        {label:'已回款',value: 4},
        {label:'待冲红',value: 5},
        {label:'已冲红',value: 6},
        {label:'申请驳回',value: 7},
        {label:'已作废',value: 8},
      ]})
  }
}
//弹窗
const rentOrderConfirm = ref()
const carData = ref([])
const rentOrderDetail = ref()
const carDialogVisible = ref(false)
const openDialog = (type:string,row:object)=>{
  switch (type){
    case 'view':
      rentOrderDetail.value.dialogShow('订单详情',row)
      break
    case 'confirm':
      rentOrderConfirm.value.dialogShow('订单确认',row)
      break
  }
}
const carHandler = (row,type: 0 | 1) => {
  if(type === 0) {
    const carItem = {
      id:row.id,
      stationId:row.stationId,
      stationName:row.stationName,
      operatorId:row.operatorId,
      operator:row.operator,
      invoicePrice:row.realPrice,
      rentSigningUnit:row.rentSigningUnit,
      rentInvoiceType:row.rentInvoiceType,
      rentInvoiceContent:row.rentInvoiceContent,
      rentTax:row.rentTax,
      orderId: [row.id],
      status: 0,
      remark:row.remark
    }
    carData.value.push(carItem)
  }else {
    const index = carData.value.findIndex(item=>item.id === row.id)
    if(index !== -1) {
      carData.value.splice(index,1)
    }
  }
}
//移除
const removeHandler = (index) => {
  carData.value.splice(index,1)
}
//发起开票/冲红申请
const carConfirm = ()=>{
  if(activeModel.value === 1) {
    carData.value.forEach(item=>{
      const takeItem = new TakeRentInvoiceObj(item)
      addTakeRentInvoice(takeItem)
    })
    message('提交成功',{type:'success'})
    carData.value = []
    tableData.value = operatorRentOrderList().filter(item=>item.status === 1)
  }
}
//作废
const delHandler = async row =>{
  try{
    const result = await ElMessageBox.prompt('请确认并填写作废原因', '订单作废',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        lockScroll:true,
        closeOnClickModal:false,
        closeOnPressEscape:false,
        inputPlaceholder: '请填写作废原因',
        inputValidator: (value)=>{
          if(!value) return '请输入作废原因'
          else return true
        },
        type: 'warning',
      }
    )
    //todo 删除接口
    if(result.action === 'confirm' && result.value) {
      row.status = 8
      row.cancelCase = result.value
      editOperatorRentOrder(row)
    }
    message('作废成功',{type:'success'})
    getTableData()
  }catch(err){

  }
}
//未完成提示
const notDone = ()=>{
  message('抱歉，功能设计中...',{type:'warning'})
}
</script>

<template>
  <PageContainer>
    <!--顶部筛选-->
    <SearchHeader :query-list="queryList" @search="searchHandler">
      <template #button>
        <el-button v-if="activeModel !== 2" :icon="Filter" :type="activeModel === 0 ? 'primary' : 'info'" @click="changeModel(1)">{{activeModel === 0 ? '进入开票' : '退出开票'}}</el-button>
        <el-button v-if="activeModel !== 1" :icon="Filter" :type="activeModel === 0 ? 'danger' : 'info'" @click="changeModel(2)">{{activeModel === 0 ? '进入冲红' : '退出冲红'}}</el-button>
      </template>
    </SearchHeader>
    <!--    表格-->
    <PageTable :columns="tableColumns" :page="pageQuery.page" :size="pageQuery.size" :table-data="tableData" :total="total" @pagination="paginationHandler">
      <template #rentSigningUnit="{row}">
        <span v-if="row.rentSigningUnit===0">晨邦</span>
        <span v-if="row.rentSigningUnit===1">网基</span>
        <span v-if="row.rentSigningUnit===2">优居</span>
        <span v-if="row.rentSigningUnit===3">坤澜</span>
        <span v-if="row.rentSigningUnit===4">晓鹰</span>
      </template>
      <template #rentInvoiceType="{row}">
        <span v-if="row.rentInvoiceType===0">专票</span>
        <span v-if="row.rentInvoiceType===1">普票</span>
      </template>
      <template #rentInvoiceContent="{row}">
        <span v-if="row.rentInvoiceContent===0">信息技术服务费</span>
        <span v-if="row.rentInvoiceContent===1">塔类站址服务费</span>
        <span v-if="row.rentInvoiceContent===2">管理费</span>
        <span v-if="row.rentInvoiceContent===3">租赁费</span>
        <span v-if="row.rentInvoiceContent===4">综合服务费</span>
        <span v-else>{{row.rentInvoiceContent}}</span>
      </template>
      <template #status="{row}">
        <el-tag v-if="row.status===0" type="info">待确认</el-tag>
        <el-tag v-if="row.status===1" type="primary">待申请开票</el-tag>
        <el-tag v-if="row.status===2" type="primary">待开票</el-tag>
        <el-tag v-if="row.status===3" type="success">已开票</el-tag>
        <el-tag v-if="row.status===4" type="success">已回款</el-tag>
        <el-tag v-if="row.status===5" type="primary">待冲红</el-tag>
        <el-tag v-if="row.status===6" type="warning">已冲红</el-tag>
        <el-tag v-if="row.status===7" type="danger">申请驳回</el-tag>
        <el-tag v-if="row.status===8" type="danger">已作废</el-tag>
      </template>
      <template #operation="{row}">
        <el-button :color="ButtonColor.VIEW" :icon="View" plain round size="small" @click="openDialog('view',row)">详情</el-button>
        <el-button v-if="[0,7].includes(row.status)" :icon="Mouse" plain round size="small" type="primary" @click="openDialog('confirm',row)">订单确认</el-button>
        <el-button v-if="[1,2].includes(activeModel) && row.status === 1 && carData.every(i=>i.id !== row.id)" :icon="CirclePlus" plain round size="small" type="primary" @click="carHandler(row,0)">加入待选</el-button>
        <el-button v-if="[1,2].includes(activeModel) && row.status === 1 && carData.some(i=>i.id === row.id)" :icon="Remove" plain round size="small" type="danger" @click="carHandler(row,1)">取消待选</el-button>
        <el-button v-if="[0,3,4].includes(row.status)" :icon="DeleteFilled" plain round size="small" type="danger" @click="delHandler(row)">订单作废</el-button>
      </template>
    </PageTable>

    <!--    购物车-->
    <div v-if="[1,2].includes(activeModel)" :class="carDialogVisible ? 'carButton active' : 'carButton'" @click="carDialogVisible = !carDialogVisible">
      <el-badge :value="carData.length">
        <el-icon class="icon"><Shop /></el-icon>
      </el-badge>
    </div>
    <!--    遮罩层-->
    <div v-if="carDialogVisible" class="mask" @click="carDialogVisible = false" />
    <!--    购物车弹层-->
    <div v-if="carDialogVisible" class="carDialog">
      <div class="title">
        待选区
        <el-button :color="ButtonColor.VIEW" :icon="DocumentAdd" class="confirm_button" round size="small" @click="carConfirm">{{activeModel === 1 ? '提交申请' : '提交冲红'}}</el-button>
      </div>
      <el-table :data="carData" height="50vh">
        <el-table-column align="center" type="index" />
        <el-table-column align="center" label="站点" prop="stationName" show-overflow-tooltip />
        <el-table-column align="center" label="运营商" prop="operator" show-overflow-tooltip />
        <el-table-column align="center" label="开票金额" prop="invoicePrice" show-overflow-tooltip />
        <el-table-column align="center" label="开票单位" prop="rentSigningUnit" show-overflow-tooltip>
          <template #default="{row}">
            <span v-if="row.rentSigningUnit===0">晨邦</span>
            <span v-if="row.rentSigningUnit===1">网基</span>
            <span v-if="row.rentSigningUnit===2">优居</span>
            <span v-if="row.rentSigningUnit===3">坤澜</span>
            <span v-if="row.rentSigningUnit===4">晓鹰</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="发票类型" prop="rentInvoiceType" show-overflow-tooltip>
          <template #default="{row}">
            <span v-if="row.rentInvoiceType===0">专票</span>
            <span v-if="row.rentInvoiceType===1">普票</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="开票内容" prop="rentInvoiceContent" show-overflow-tooltip />
        <el-table-column align="center" label="备注" prop="remark" show-overflow-tooltip />
        <el-table-column align="center" label="操作">
          <template #default="{$index}">
            <el-button :icon="Remove" circle plain size="small" type="danger" @click="removeHandler($index)" />
          </template>
        </el-table-column>

        <template #empty>
          <div class="empty">
            <el-empty :image="TableEmpty" :image-size="320" description="点击“加入待选”添加订单至待选区" />
          </div>
        </template>
      </el-table>
    </div>

    <!--    订单详情-->
    <RentOrderDetail ref="rentOrderDetail" />
<!--    订单确认-->
    <RentOrderConfirm ref="rentOrderConfirm" @done="getTableData" />
  </PageContainer>
</template>

<style lang="scss" scoped>
.carButton {
  position: fixed;
  bottom: 1vh;
  right: 1vh;
  width: 8vh;
  height: 8vh;
  border-radius: 4vh;
  background-color: #5c7cfa;
  z-index: 999;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateX(6vh);
  cursor: pointer;

  &:hover {
    animation: appear 0.6s 0.1s ease-in-out forwards;
  }

  &.active {
    transform: translateX(0);
  }

  @keyframes appear {
    100% {
      transform: translateX(0);
    }
  }

  .icon {
    font-size: 5vh;
    font-weight: 700;
    color: #fff;
  }
}
.carDialog {
  position: fixed;
  bottom: 9vh;
  right: 6vh;
  width: 120vh;
  height: 60vh;
  padding: 1vh;
  border-radius: 1vh;
  background-color: #fff;
  z-index: 999;

  .title {
    padding: 5px 10px;
    margin-bottom: 10px;
    font-size: 2vh;
    font-weight: 700;
    border-bottom: 1px dashed #ccc;
    color: #333;
    text-align: center;

    .confirm_button {
      float: right;
    }
  }
}
.mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.3);
  z-index: 990;
}
</style>
